<template>
  <view>
    <view class="logo-container">
      <view>
        <image src="/static/logo.png" mode="aspectFill" />
      </view>
    </view>

    <view class="app-name">{{ appConfig.name }}</view>

    <view class="policy">
      <text @click="handleOpen(1)">《用户协议》</text>
      <text @click="handleOpen(2)">《隐私协议》</text>
    </view>

    <view class="powerBy" @click="handleGotoSupport">
      <view>睿警信科技提供技术支持</view>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import { useGlobalSetting } from '@/settings'
import { buildUrl } from '@/utils'

@Component({ name: 'About' })
export default class About extends Vue {
  get appConfig() {
    return useGlobalSetting()
  }

  handleGotoSupport() {
    uni.redirectTo({
      url: './support'
    })
  }

  handleOpen(type: 1 | 2 = 1) {
    const { privacyUrl } = useGlobalSetting()
    if (!privacyUrl.length) return

    uni.navigateTo({
      url: buildUrl('/pages/webview/index', {
        url: privacyUrl[type - 1] ?? privacyUrl[0]
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 328rpx;
  //background-color: #d9d9d9;
  //border-radius: 20rpx;
  //overflow: hidden;

  image {
    width: 140rpx;
    height: 140rpx;
    border-radius: 20rpx;
    background-color: #d9d9d9;
    border-radius: 20rpx;
    overflow: hidden;
  }
}

.app-name {
  margin-top: 24rpx;
  font-size: 30rpx;
  line-height: 42rpx;
  color: #333333;
  text-align: center;
}

.policy {
  margin-top: 48rpx;
  font-weight: 400;
  font-size: $font-size-xs;
  line-height: 32rpx;
  color: $color-primary;
  text-align: center;
}

.powerBy {
  position: fixed;
  bottom: calc(30rpx + $bs-height);
  left: 0;
  right: 0;
  text-align: center;
  font-size: $font-size-base;
  color: $color-second-text;
}
</style>
